<style lang="less">
 @import './todos.less';
</style>

<template>
  <nav class="todos">
    <a
      v-for="todo in dataSource"
      :key="todo.id"
      href="javascript:;"
      class="todos-item"
      :class="{ 'todos-item__actived': activedKey }"
      @click="handleClick(todo, $event)"
    >
      <v-icon v-if="todo.icon" :type="todo.icon" /> {{ todo.name }}
    </a>
  </nav>
</template>

<script>
import Icon from '~/components/icon'

export default {
  components: {
    'v-icon': Icon,
  },

  props: {
    activedKey: {
      type: String,
      default: '',
    },

    dataSource: {
      type: Array,
      default () {
        return []
      },
    },
  },

  methods: {
    handleClick (todo, ev) {
      this.$emit('click', todo, ev)
    },
  },
}
</script>
